<template>
  <div class="detailed">
    <van-tabs
      v-model:active="active"
      title-inactive-color="#fff"
      title-active-color="#000"
      background="#0f8a40"
      color="#f2f2f2"
      
      type="card"
      swipeable
    >
    <!-- :sticky="true"
      offset-top="4rem" -->
      <van-tab
        v-for="(value, index) in navbar"
        :key="index"
        :name="value.code"
        :title="value.name"
      >
        <component :is="value.url" v-if="active == value.code"></component>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import proStatistics from "@/components/profit/index/detailed/proStatistics";
import unsettled from "@/components/profit/index/detailed/unsettled";
export default {
  components: {
    proStatistics,
    unsettled,
  },
  setup() {
    const data = reactive({
      navbar: [
        { name: "未发放", url: "unsettled", code: 1 },
        { name: "已发放", url: "proStatistics", code: 2 },
      ],
      active: 1,
    });
    return { ...toRefs(data) };
  },
};
</script>